<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Regular.js • Modal</title>
    <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
    <script src="../../dist/regular.js"></script>
  </head>
  <body>

    <div id="app">
      <div id="app"></div>
    </div>

    <!-- Templates -->
    <script id="modal" type="text/regular" name='modal'>
      <div class="modal show {{clazz}}">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" on-click={{this.close()}} data-dismiss="modal" aria-hidden="true">×</button>
              <h4 class="modal-title">{{title}}</h4>
            </div>
            <div class="modal-body">
              {{#include content }}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" on-click={{this.close()}} >Close</button>
              <button type="button" class="btn btn-primary" on-click={{this.confirm()}}>Confirm</button>
            </div>
          </div>
        </div>
      </div>
    </script>
    
    <script>
    var Modal = Regular.extend({
      template: '#modal',
      init: function(){
        if(!this.$parent) this.inject(document.body)
      },
      close: function(){
        this.$emit('close');
        this.destroy();
      },
      confirm: function(){
        this.$emit('confirm', this.data);
        this.destroy();
      }
    });

    // 直接调用
    var modal = new Modal({
      data: {
        content: '<input type="email" class="form-control" r-model={{email}} on-enter={{this.confirm()}}>',
        title: '请确认您的邮箱'
      }
    });
    modal.$on('confirm', function(data){
      console.log(data.email)
    });
    </script>
  </body>
</html>
